<block name="body">
    <div class="layui-card-body" style="height: 630px;width:750px;">
        <div id="rule"></div>
    </div>
    <block name="script">
        <script type="text/javascript">
            layui.use(['element', 'table', 'transfer'], function () {
                var $ = layui.$
                transfer = layui.transfer;
                getrule()

                function getrule() {
                    $.ajax({
                        url: "{:url('getrule?id='.$id)}",
                        type: 'get',
                        dataType: 'json',
                    })
                        .done(function (res) {
                            if (res.data == null) {
                                layer.msg('没有内容', {
                                    time: 1500,
                                    icon: 5
                                });
                            } else {
                                //渲染
                                transfer.render({
                                    elem: '#rule'  //绑定元素
                                    , title: ['待选规则', '已有规则']
                                    , showSearch: false
                                    , onchange: function (data, index) {
                                        console.log(data); //得到当前被穿梭的数据
                                        console.log(index); //如果数据来自左边，index 为 0，否则为 1
                                    }
                                    , width: 330
                                    , height: 600
                                    , data: res.data.rule
                                    , value: res.data.have_rule
                                    , parseData: function (res) {
                                        return {
                                            "value": res.id //数据值
                                            , "title": res.title + '|' + res.name//数据标题
                                            , "disabled": false  //是否禁用
                                            , "checked": res.checked == 1 ? true : false //是否选中
                                        }
                                    }
                                    , onchange: function (data, index) {
                                        updaterule()
                                    }
                                    , id: 'rule' //定义索引
                                });
                            }
                        })
                        .fail(function () {
                            layer.msg('服务器异常', {
                                time: 1500,
                                icon: 5
                            });
                        })
                        .always(function () {

                        });
                }

                function updaterule() {
                    $.ajax({
                        url: "{:url('assigned?id='.$id)}",
                        type: 'post',
                        dataType: 'json',
                        data: {
                            list: transfer.getData('rule')
                        }
                    })
                        .done(function (res) {
                            if (res.code == 0) {
                                layer.msg(res.msg, {
                                    time: 1500,
                                    icon: 5
                                });
                            } else {
                                layer.msg(res.msg, {
                                    time: 1500,
                                    icon: 1
                                });
                                getrule();
                            }
                        })
                        .fail(function () {
                            layer.msg('服务器异常', {
                                time: 1500,
                                icon: 5
                            });
                        })
                        .always(function () {

                        });


                }

            });
        </script>
    </block>

</block>
